<script setup lang="ts">
import { ref } from "vue";

const count = ref<number>(0);

const addCount = () => {
  count.value += 1;
};
</script>

<template>
  <div>
    <h1>HarmonyPolit</h1>
    <div>count is: {{ count }}</div>
    <button class="btn" @click="addCount">+1</button>
  </div>
</template>

<style scoped>
.btn {
  outline: none;
  background-color: #4096ff;
  color: #fff;
  border: none;
  padding: 8px 20px;
  margin-top: 20px;
  border-radius: 4px;
}

.btn:hover {
  cursor: pointer;
}
</style>
